<template>
	<view v-if="value" class="y-popup" @touchmove.stop="clear" @tap.stop="hide">
		<view class="y-popup-box" :class="value ? 'show' : ''" @click.stop="clear"><slot /></view>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	},
	methods: {
		hide(e) {
			this.$emit('input', false);
			this.clear(e);
		},
		clear(e) {
			// TODO nvue 取消冒泡
			// e.stopPropagation();
		}
	}
};
</script>

<style scoped lang="scss">
@keyframes bottomTop {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}
.y-popup {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background-color: $uni-bg-color-mask;
	&-box {
		position: absolute;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		transform: translateY(100%);
		&.show {
			animation: bottomTop .5s;
			animation-fill-mode:forwards;
		}
	}
}
</style>
